<template>
	<view class="content">
		<view class="card_wrapper">
			<view class="desc_title_wrapper">
				主办单位:
			</view>
			<view class="unit_name">
				{{unitName}}
			</view>
			<view class="desc_title_wrapper">
				培训内容:
			</view>
			<view class="desc_wrapper">
				<view class="desc_item" v-for="(item,index) in descData" :key="index">
					{{ `${item}` }}
				</view>
			</view>
		</view>
		<view class="card_wrapper" style="height: inherit;">
			<view class="form_wrapper">
				<rForm ref="formRef" v-model="form" :rules="rule">
					<rFormItem label="姓名" prop="signName">
						<input type="text" class="_form_item_input" v-model="form.signName" placeholder="请输入姓名" />
					</rFormItem>
					<rFormItem label="联系方式" prop="signPhone">
						<input type="text" class="_form_item_input" v-model="form.signPhone" placeholder="请输入联系方式" />
					</rFormItem>
					<rFormItem label="培训时间" prop="signTime">
						<view class="_form_item_input">
							<picker mode="selector" :range="applicationTime" @change="selectItem">
								<view class="_picker_view">
									<text>{{form.signTime || '请选择时间'}}</text>
									<up-icon name="arrow-down" color="#9e9e9e" size="28"></up-icon>
								</view>
							</picker>
						</view>
					</rFormItem>
				</rForm>
			</view>
			<view class="bthiamge" @click="handleSign">提交报名</view>
		</view>

	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import rForm from '@/components/r-from.vue'
	import rFormItem from '@/components/r-form-item.vue'
	import {
		signActivity
	} from '../../api/activity';
	let unitName = ref('加载中...');
	let detail = ref({})
	let descData = reactive(["加载中..."

	])
	let trainingInfo = [];
	const rule = {
		signName: {
			type: 'name',
			msg: '请输入合法姓名'
		},
		signPhone: {
			type: 'phone',
			msg: '请输入合法的电话号码'
		},
		signTime: {
			type: 'text',
			msg: '请选择时间'
		}
	}
	const form = ref({
		activityId: null,
		signName: null,
		signPhone: null,
		signTime: null,
		trainingInfo: null,
	})
	const formRef = ref(null);

	let applicationTime = ref([])

	function selectItem(e) {
		form.value.signTime = applicationTime.value[e.detail.value]
		form.value.trainingInfo = JSON.stringify(trainingInfo[e.detail.value])
	}

	onLoad((options) => {
		console.log(options);
		detail.value = JSON.parse(options.data);
		form.value.activityId = detail.value.activityId
		console.log(JSON.parse(options.applicationData));
		applicationTime.value = JSON.parse(options.applicationData);
		trainingInfo = JSON.parse(detail.value.trainingInfo);
		console.log(detail.value);
		unitName.value = detail.value.organizer;
		descData = [];
		descData.push(detail.value.trainingContent);
		// descData.push(str);
		// console.log(descData);
	})

	async function handleSign() {
		const valid = formRef.value.validate()
		if (valid) {
			await signActivity(form.value)
			uni.navigateTo({
				url: '/pages/index/success',
			});
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		height: 100vh;
		align-items: center;
		flex-direction: column;
		gap: 20px;
		background-color: #f0f0f0;
	}

	.card_wrapper {
		width: 95%;
		border-radius: 20rpx;
		background-color: #fff;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		padding: 30rpx 20rpx;
		gap: 20rpx;
	}

	.desc_title_wrapper {
		font-weight: 600;
		font-size: 1.1rem;
		position: relative;
		width: fit-content;
	}

	.desc_title_wrapper::after {
		position: absolute;
		width: 100%;
		bottom: -3px;
		border-radius: 6rpx;
		left: 0%;
		height: 12rpx;
		content: "";
		background: rgb(229, 38, 3);
		background: linear-gradient(90deg, rgba(229, 38, 3, 1) 31%, rgba(255, 255, 255, 1) 93%);
	}

	.unit_name {
		font-weight: 600;
		font-size: 0.9rem;
	}

	.desc_wrapper {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 40rpx;
	}

	.desc_item {
		color: #757575;
		font-size: 0.8rem;
	}

	.form_wrapper {
		width: 100%;
		box-sizing: border-box;
	}

	image {
		width: 80%;
		height: 50px;
	}

	.bthiamge {
		width: 230px;
		height: 60px;
		background-color: #ea2204;
		border-radius: 30px;
		text-align: center;
		line-height: 60px;
		letter-spacing: 5px;
		color: white;
		font-size: 1.2rem;
		font-weight: bold;
		margin: 40px auto;
	}
</style>